<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
	<script type="text/javascript">
		// <![CDATA[ 
			$('document').ready(function(){
				var item = $('.message').find('li').text();
				if(item != null && item.length > 2){
					$('.message').css({"display":"block"});
				}
			});
		// ]]> 
	</script>
	<div id="top">
		<div class="menu-top">
			<ul>
				<li id="top-home-id">
					<a href="#{facesContext.externalContext.requestContextPath}/index.html">
						<img align="top" class="icon" src="#{facesContext.externalContext.requestContextPath}/resources/images/icon/home.png" />
						<h:outputText value="#{msg['home']}" />
					</a>
				</li>
				<li id="top-human-resources-id">
					<a href="#{facesContext.externalContext.requestContextPath}/human-resources/index.html">
						<img align="top" class="icon" src="#{facesContext.externalContext.requestContextPath}/resources/images/icon/group.png" />
						<h:outputText value="#{msg['employee-management']}" />
					</a>
				</li>
				<li id="top-inventory-id">
					<a>
						<img align="top" class="icon" src="#{facesContext.externalContext.requestContextPath}/resources/images/icon/warehouse.png" />
						<h:outputText value="#{msg['inventory-management']}" />
					</a>
				</li>
				<li id="top-approval-id">
					<a>
						<img align="top" class="icon" src="#{facesContext.externalContext.requestContextPath}/resources/images/icon/approval.png" />
						<h:outputText value="#{msg['approval']}" />
					</a>
				</li>
				<li id="top-information-id">
					<a href="#{facesContext.externalContext.requestContextPath}/company-info.html">
						<img align="top" class="icon" src="#{facesContext.externalContext.requestContextPath}/resources/images/icon/info.png" />
						<h:outputText value="#{msg['company-info']}" />
					</a>
				</li>
			</ul>
			<span class="clear"></span>
		</div>
		<div id="logo">
			<img src="http://ssl.gstatic.com/ui/v1/icons/mail/logo_black.png" />
		</div>
		<div class="logged-in">
			<a>
				<img class="icon" src="#{facesContext.externalContext.requestContextPath}/resources/images/icon/user.png" align="top" />
				<span class="logged-in-user">Hồng Huỳnh Quang Vũ</span>
			</a>
			<div class="logged-in-panel-div">
				<div class="logged-in-panel">
					<a>
						<img src="#{facesContext.externalContext.requestContextPath}/resources/images/icon/settings.png" />
						<span>Thông tin</span>
					</a>
				</div>
				<div class="logged-in-panel">
					<a>
						<img src="#{facesContext.externalContext.requestContextPath}/resources/images/icon/lock.png" />
						<span>Thay đổi mật khẩu</span>
					</a>
				</div>
				<div class="logged-in-panel">
					<a>
						<img src="#{facesContext.externalContext.requestContextPath}/resources/images/icon/logout.png" />
						<span>Thoát</span>
					</a>
				</div>
			</div>
		</div>
		<span class="clear"></span>
		<div class="message">
			<a class="message-close">
				<img align="absmiddle" src="#{facesContext.externalContext.requestContextPath}/resources/images/icon/close.png" />
			</a>
			<h:messages style="float:left"></h:messages>
		</div>
	</div>
</ui:composition>